<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="order by dede58.com"/>
    <title>我的购物车-有家书店</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/style.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/layui/css/layui.css">
</head>
<body>
<!-- start header -->
<!--end header -->

<!-- start banner_x -->
<div class="banner_x center">
    <a><div class="fl" style="margin-top: 20px"><img src="img/logel.png"></div></a>

    <div class="wdgwc fl ml40">我的购物车</div>
    <div class="wxts fl ml20">温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</div>
    <div class="dlzc fr">
        <%--<ul>
            <li><a href="" target="_blank">登录</a></li>
            <li>|</li>
            <li><a href="" target="_blank">注册</a></li>
        </ul>--%>
    </div>
    <div class="clear"></div>
</div>
<div class="xiantiao"></div>
<div class="gwcxqbj">
    <div class="gwcxd center">
        <div class="top2 center" id="head">
            <div class="sub_top fl">
                <input type="checkbox" value="quanxuan" class="quanxuan checkAll"/>全选
            </div>
            <div class="sub_top fl">商品名称</div>
            <div class="sub_top fl">单价</div>
            <div class="sub_top fl">数量</div>
            <div class="sub_top fl">小计</div>
            <div class="sub_top fr">操作</div>
            <div class="clear"></div>
        </div>
        <div id="fanxuan">
            <c:forEach items="${sessionScope.allGWC}" var="obj" >
                <div class="content2 center">
                    <div class="sub_content fl">
                        <input type="checkbox" value="quanxuan" class="quanxuan danxuan" style="margin-top:50px " />
                        <input type="hidden" value="${obj.get("gwcid")}">
                    </div>
                    <div class="sub_content fl"><img src="${obj.get("url")}" width="60px" height="80px" style="margin-top: 20px"></div>
                    <div class="sub_content fl ft20">${obj.get("bookname")}</div>
                    <div class="sub_content fl price">${obj.get("price")}</div>
                    <div class="sub_content fl" style="width: 100px;margin-left: 110px">
                        <button style="width: 20px" class="jian">-</button>
                        <input class="shuliang count" type="text"  value="${obj.get("count")}" step="1" min="1" style="margin-top: 40px; width: 50px" >
                        <button style="width: 20px" class="jia">+</button>
                        <input type="hidden" value="${obj.get("gwcid")}">
                    </div>
                    <div class="sub_content fl xj" style="margin-left: 90px">${obj.get("price")*obj.get("count")}</div>
                    <div class="sub_content fl">
                        <button class="shachu" style="display: inline-block; width: 70px; height: 30px;font-size: 15px;background-color: orangered;margin-top: 40px;margin-left: -39px">删除</button>
                        <input type="hidden" value="${obj.get("gwcid")}">
                    </div>
                    <div class="clear"></div>
                </div>
            </c:forEach>
        </div>
    </div>
    <div class="jiesuandan mt20 center">
        <div class="tishi fl ml20">
            <ul>
                <li><a href="${pageContext.request.contextPath}/showzhuye.jsp">继续购物</a></li>
                <li>|</li>
                <li>共<span id="zongliang">0</span>件商品，已选择<span id="yixuan">0</span>件</li>
                <div class="clear"></div>
            </ul>
        </div>
        <div class="jiesuan fr">
            <div class="jiesuanjiage fl">合计（不含运费）：<span id="hj">0</span><input type="hidden" id="hj1"></div>
            <div class="jsanniu fr"><input class="jsan" type="submit" name="jiesuan" id="jiesuan"  value="去结算"/></div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>
</div>

<div style="display: none">
    <p>是否款</p>
</div>
</body>

<script src="${pageContext.request.contextPath}/layui/layui.all.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['carousel','form','jquery','layer'], function(){
        var carousel = layui.carousel
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;

        function showtable(){
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/gwc/selectAllGWC',
                dataType:'json',//预期的后台数据类型
                success:function (data) {
                    //alert(JSON.stringify(data))
                    var zongliang = 0;
                    var zongjia = 0;
                    for (var i = 0;i<data.length;i++){
                        zongliang += data[i].count;
                        zongjia += Number(data[i].count*data[i].price)
                    }
                    $("#zongliang").text(zongliang);
                    $("#hj1").val(zongjia);
                }
            })
        }

        $(function () {
            showtable();
        })

        $(".jian").click(function () {
           var c = Number($(this).next().val());
           if (c == 1){

           }else {
               c--;
               $(this).next().val(c)
           }
            var price = Number($(this).parent().prev().text());
            var count = Number($(this).next().val());
            $(this).parent().next().text((price*count).toFixed(2));
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/gwc/updatecountByGwcid',
                data:{"gwcid":$(this).next().next().next().val(),"count":$(this).next().val()},
                async:false,
                dataType:'json',//预期的后台数据类型
                success:function (data) {
                    //alert(JSON.stringify(data))
                    var zongliang = 0;
                    var zongjia = 0;
                    for (var i = 0;i<data.length;i++){
                        zongliang += data[i].count;
                        zongjia += Number(data[i].count*data[i].price);
                    }
                    $("#zongliang").text(zongliang);
                    $("#hj1").val(zongjia);

                    var yixuanze = 0;
                    var yixuanzongjia = 0;
                    $(".danxuan:checked").each(function () {
                        yixuanze += Number($(this).parent().next().next().next().next().children("input:eq(0)").val()) ;
                        yixuanzongjia += Number($(this).parent().next().next().next().next().next().text());
                    })
                    $("#hj").text(yixuanzongjia);
                    $("#yixuan").text(yixuanze);
                }
            })
        })

        $(".jia").click(function () {
            var c = Number($(this).prev().val());
            c++;
            $(this).prev().val(c)
            var price = Number($(this).parent().prev().text());
            var count = Number($(this).prev().val());
            $(this).parent().next().text((price*count).toFixed(2));
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/gwc/updatecountByGwcid',
                data:{"gwcid":$(this).next().val(),"count":$(this).prev().val()},
                async:false,
                dataType:'json',//预期的后台数据类型
                success:function (data) {
                    //alert(JSON.stringify(data))
                    var zongliang = 0;
                    var zongjia = 0;
                    for (var i = 0;i<data.length;i++){
                        zongliang += data[i].count;
                        zongjia += Number(data[i].count*data[i].price);
                    }
                    $("#zongliang").text(zongliang);
                    $("#hj1").val(zongjia);

                    var yixuanze = 0;
                    var yixuanzongjia = 0;
                    $(".danxuan:checked").each(function () {
                        yixuanze += Number($(this).parent().next().next().next().next().children("input:eq(0)").val()) ;
                        yixuanzongjia += Number($(this).parent().next().next().next().next().next().text());
                    })
                    $("#hj").text(yixuanzongjia);
                    $("#yixuan").text(yixuanze);
                }
            })
        })

        //全选
        $(".checkAll").change(function(){
            $(".danxuan").prop("checked", $(this).prop("checked"));
            //alert($(this).prop("checked"));
            //alert($("#zongliang").text())
            if ($(".checkAll").prop("checked") == true){
                $("#yixuan").text($("#zongliang").text());
                $("#hj").text($("#hj1").val());
            }else {
                $("#hj").text("0");
                $("#yixuan").text("0");
            }

        })

        //反选
        $("#fanxuan"). on("change",".danxuan",function(){
            if ($(".danxuan:checked").length === $(".danxuan").length) {
                $(".checkAll").prop("checked", true);
            } else {
                $(".checkAll").prop("checked", false);
            }
            var yixuanze = 0;
            var yixuanzongjia = 0;
            $(".danxuan:checked").each(function () {
                yixuanze += Number($(this).parent().next().next().next().next().children("input:eq(0)").val()) ;
                yixuanzongjia += Number($(this).parent().next().next().next().next().next().text());
            })
            $("#hj").text(yixuanzongjia);
            $("#yixuan").text(yixuanze);
        })

        //删除
        $(".shachu").click(function () {
            //alert($(this).next().val());
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/gwc/deleteGwcByGwcid',
                data:{"gwcid":$(this).next().val()},
                dataType:'json',//预期的后台数据类型
                success:function (data) {
                    //alert(JSON.stringify(data))
                    var zongliang = 0;
                    var zongjia = 0;
                    for (var i = 0;i<data.length;i++){
                        zongliang += data[i].count;
                        zongjia += Number(data[i].count*data[i].price);
                    }
                    $("#zongliang").text(zongliang);
                    $("#hj1").val(zongjia);
                    //location.reload();
                }
            })
        })

        $("#jiesuan").click(function () {
            //alert($(".danxuan").length);
            var gwcidAll= "";
            var totalcount = 0;
            var totalprice = 0;
            $(".danxuan").each(function(){
                //$(this)表示当前遍历到的这个jq对象，此时只能使用jq对象特有的方法和属性。
                //this 就表示当前的js对象  可以使用js对象特有的方法。
                //$(this).prop("checked") 这个多选框 是否是 选中状态
                 //alert(this.nextElementSibling.value); //使用js
                if ($(this).prop("checked") == true){
                    gwcidAll += $(this).next().val()+",";
                    totalcount += Number($(this).parent().next().next().next().next().children("input:eq(0)").val());
                    totalprice += Number($(this).parent().next().next().next().next().next().text());
                }
            })
            layer.confirm('确定要付款吗？', function(index){
                $.ajax({
                    type:'post',
                    url:'${pageContext.request.contextPath}/dingdan/payment',
                    dataType:'json',//预期的后台数据类型
                    data:{"gwcid":gwcidAll,"totalcount":totalcount,"totalprice":totalprice},//当前表单的所有数据
                    success:function (data) {
                        var zongliang = 0;
                        var zongjia = 0;
                        for (var i = 0;i<data.length;i++){
                            zongliang += data[i].count;
                            zongjia += Number(data[i].count*data[i].price);
                        }
                        $("#zongliang").text(zongliang);
                        $("#hj1").val(zongjia);
                        setTimeout("window.location.href = '${pageContext.request.contextPath}/myself.jsp'",1500);
                    }
                })
                layer.close(index);
            });
        })

    });
</script>
</html>
